

Ext.define('MyApp.view.appointmentList', {
    extend: 'Ext.Panel',
	xtype: 'appointmentlist',
    config: {
        
        layout: {
            type: 'fit'
        },
        items: [
            {
                xtype: 'titlebar',
                docked: 'top',
				cls: ['toolbarHeader','t2Header','t3Header'],
                title: 'Appointments',
				items: [{
                            xtype: 'button',
                            align: 'left',
                            iconCls: 'settings',
                            iconMask: true,
                            ui: 'plain',
							itemId: 'settings'
                        }, 
						// {
                            // xtype: 'button',
                            // align: 'left',
                            // iconCls: 'settings',
                            // iconMask: true,
                            // ui: 'plain',
							// itemId: 'nothing',
                            // handler: function () {
                             // var storage = window.localStorage;
								// storage.clear();
								
                            // } // handler
                        // }, 
						{
                            xtype: 'button',
                            align: 'right',
                            iconCls: 'add',
                            iconMask: true,
                            ui: 'plain',
							itemId: 'create'
                        }] // items
            },
            {
                xtype: 'list',
				itemId: 'applist',
				disableSelection: true,
				cls: ['listHeader','listItem','listItemInner'],
                itemTpl: new Ext.XTemplate(
					'<tpl for=".">',
					'<div><div style="width:40%;text-align:left;color:#000000;font-size:16px;float:left;font-family:"Arial,Helvetica,sans-serif";">{firstname} {lastname}</div> <div style="width:60%;text-align:right;float:right;font-size:16px;">{[this.shortenStartTime(values)]} - {[this.shortenEndTime(values)]}</div>',
					'</div>',
					'<div><div style="width:40%;text-align:left;color:#676767;float:left;padding-top:4px;padding-bottom:2px;font-size:12px;font-style:italic;font-family:"Arial,Helvetica,sans-serif";">{[this.shortenNotes(values)]}</div> ',
					'<div style="width:60%;text-align:right;float:right;">',
					'<tpl if="this.sentBySMS(sentby)">',
						'<img src="resources/resources/icons/chat2.png" align="right" height="25" width="25" style="padding:4px;" />',
					'</tpl>',
					'<tpl if="this.sentByEmail(sentby)">',
						'<img src="resources/resources/icons/mail5.png" align="right" height="25" width="25" style="padding:4px;" />',
					'</tpl>',
					'<tpl if="this.isMap(maplink)">',
						'<img src="resources/resources/icons/locate4.png" align="right" height="25" width="25" style="padding:4px;" />',
					'</tpl>',
					'<tpl if="this.isCalendar(calendar)">',
						'<img src="resources/resources/icons/calendar_add.png" align="right" height="25" width="25" style="padding:4px;" />',
					'</tpl>',
					'</tpl>',
					'</div>',
					'</div>',
					{
						isMap: function(maplink){
							if (maplink == 'true'){
								return true;
							}
							else {
								return false;
							}
						
						},
						
						isCalendar: function(calendar){
							if (calendar == 'true'){
								return true;
							}
							else {
								return false;
							}
						},
						
						sentBySMS: function(sentby){
							if (sentby == 'SMS'){
								return true;
							}
							else{
								return false;
							}
						},
						
						sentByEmail: function(sentby){
							if (sentby == 'Email'){
								return true;
							}
							else{
								return false;
							}
						},
						shortenStartTime: function(values) {
							if (values.starttime.toString().substr(11,1) == 0){
								var time = Ext.Date.format(values.starttime,"g:i A");
								return time;
							}
							else{
								var time = Ext.Date.format(values.starttime,"g:i A");
								return time;
							}
							//return values.starttime;
						},
						shortenEndTime: function(values) {
							if (values.endtime.toString().substr(11,1) == 0){
								var time = Ext.Date.format(values.endtime,"g:i A");
								return time;
							}
							else{
								var time = Ext.Date.format(values.endtime,"g:i A");
								return time;
							}
							//values.endtime;
						},
						shortenNotes: function(values) {
							var notes = values.notes.toString().substr(0,22);
							if (notes.length == 22) {
								notes += "...";
							}
							return notes;
						}
					}
				),
				listeners:{
					itemtap: function(view, index, item, e) {
						var rec = view.getStore().getAt(index);
						this.fireEvent("editAppointmentCommand",rec)
					}
				},
				store: 'LocalAppointments',
				grouped: true
            }
        ]
    }

});